import React, { Component } from 'react'
import { Form, Icon, Input, Button, Checkbox, message } from 'antd'
import 'antd/dist/antd.css'
import styles from './index.less'
import Vcode from '@/components/Vcode'
import { router } from 'umi'
import { connect } from 'dva'

@connect(() => ({}))
class LoginForm extends Component {
  state = {
    emailCode: '',
    vcode: '-1',
    code: '',
    isTip: true
  }
  handleSubmit = e => {
    e.preventDefault()
    if (this.state.vcode === this.state.emailCode) {
      this.props.form.validateFields((err, values) => {
        if (!err) {
          const { dispatch } = this.props
          dispatch({
            type: 'login/login',
            payload: {
              mobile: values.email,
              password: values.password,
              code: this.state.emailCode,
              userType: 'OPE'
            }
          })
        }
      })
    }
  }
  handleEmailInput(e) {
    this.setState(
      {
        emailCode: e.target.value
      },
      () => {
        if (this.state.emailCode === this.state.vcode) {
          this.setState({
            isTip: true
          })
        } else if (this.state.emailCode === '') {
          this.setState({
            isTip: true
          })
        } else if (this.state.emailCode !== this.state.vcode) {
          this.setState({
            isTip: false
          })
        }
      }
    )
  }
  onVcode(value) {
    if (value) {
      this.setState({
        vcode: value
      })
    }
  }
  render() {
    const { getFieldDecorator } = this.props.form
    const { errorTips, isTip } = this.state
    return (
      <div>
        <Form onSubmit={this.handleSubmit} className="login-form">
          <div className={styles.loginInput}>
            <Form.Item>
              {getFieldDecorator('email', {
                rules: [{ required: true, message: '请输入邮箱/手机号' }]
              })(
                <Input
                  prefix={
                    <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                  }
                  placeholder="请输入邮箱/手机号"
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入密码' }]
              })(
                <Input
                  type="password"
                  prefix={
                    <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                  }
                  placeholder="请输入密码"
                />
              )}
            </Form.Item>
            <div className={styles.email}>
              <Form.Item
                hasFeedback={this.state.emailCode === this.state.vcode}
              >
                {getFieldDecorator('code', {
                  rules: [{ required: true, message: '请输入验证码' }],
                  onChange: e => this.handleEmailInput(e)
                })(
                  <Input
                    autocomplete= "off"
                    style={{ width: '227px' }}
                    prefix={
                      <Icon type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />
                    }
                    placeholder="请输入验证码"
                    maxLength={4}
                  />
                )}
              </Form.Item>
              <Vcode
                onChange={value => this.onVcode(value)}
                value={this.state.code}
                height={40}
              />
              {isTip ? null : (
                <p className={styles.tipText}>验证码输入不正确</p>
              )}
            </div>
          </div>

          {/*<Button*/}
          {/*  type="link"*/}
          {/*  style={{*/}
          {/*    float: 'right',*/}
          {/*    paddingRight: 70,*/}
          {/*    cursor: 'pointer',*/}
          {/*  }}*/}
          {/*  onClick={() => router.push('/user/ChangePassword')}*/}
          {/*>*/}
          {/*  修改密码*/}
          {/*</Button>*/}

          <div className={styles.loginButton}>
            <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
              <Button
                style={
                  this.state.emailCode === this.state.vcode
                    ? null
                    : { backgroundColor: '#D3D3D3', border: 'none' }
                }
                className={`${styles.button} notranslate`}
                type="primary"
                htmlType="submit"
              >
                登录{' '}
              </Button>
            </Form.Item>
          </div>
        </Form>
      </div>
    )
  }
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(LoginForm)

export default WrappedNormalLoginForm
